<template>
	<view class="content">

		<!-- 轮播图 -->
		<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper circular autoplay="true" interval="2000" duration="500" class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass">
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 轮播图 -->

		<!-- 菜单 -->
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view @click="onGridClick(item.id)" class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 菜单 -->


	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		computed: {
			i18n() {
				return this.$t('index')
			},
		},
		components: {
			uniSwiperDot
		},
		data() {
			return {
				//轮播图
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				//菜单
				cuIconList: [{
							cuIcon: 'locationfill',
							color: 'blue',
							badge: 0,
							name: this.$t('index').attendance,
							id: 'attendance'
						}, {
							cuIcon: 'commandfill',
							color: 'red',
							badge: 0,
							name: this.$t('index').leave,
							id: 'leave'
						}, {
							cuIcon: 'myfill',
							color: 'orange',
							badge: 0,
							name: this.$t('index').businessTravel,
							id:'businessTravel'
						}, 
						// {
						// 	cuIcon: 'formfill',
						// 	color: 'yellow',
						// 	badge: 0,
						// 	name: '外出'
						// }, {
						// 	cuIcon: 'clothesfill',
						// 	color: 'green',
						// 	badge: 0,
						// 	name: '加班',
						// 	id: 'devicelist'
						// },
						{
							cuIcon: 'group_fill',
							color: 'purple',
							badge: 0,
							name: this.$t('index').approval,
							id: 'approval'
						}],
				gridCol: 3,
				gridBorder: false,
			};
		},
		onShow() {
			uni.setTabBarItem({
				index: 0,
				text: this.$t('home')
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$t('mine')
			})
			this.getMessage()
		},
		onLoad() {
			this.$constant.checkUserInfo()
		},
		methods: {
			getMessage() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_MESSAGE_TOTAL,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						userid: getApp().globalData.userid,
					},
					complete: (res) => {
						console.log(res.data)
						if (res.data.code == 0) {
							//重新刷新数据
							let result = res.data.data
							this.cuIconList[3].badge = result.stay
						}
					}
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			onGridClick(id) {
				// console.log(id)
				switch (id) {
					case 'leave':
						uni.navigateTo({
							url: 'leave/leavetype'
						})
						break
					case 'attendance':
						uni.navigateTo({
							url: 'attendance/attendance'
						})
						break
					case 'approval':
						uni.navigateTo({
							url: '../myself/approval/approval'
						})
						break
					case 'businessTravel':
						uni.navigateTo({
							url: 'business-travel/business-travel'
						})
						break
					default:
						uni.showToast({
							title: this.$t('comingSoon'),
							icon: 'none'
						})
						break;
				}
			}
		}
	}
</script>

<style>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
	}

	.image {
		width: 750rpx;
	}
</style>
